<script setup>
import { reactive, onMounted } from "vue";
import Header from "@/components/Header.vue"
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
import { submitWithdraw, getOrderStatistic } from "@/api"
import { formatPrice } from "@/utils"
const { t } = useI18n();
const state = reactive({
    type: 'BANKCARD',
    amount: '',
    password: '',
    loading: false,
    balance: 0
})
onMounted(() => {
    getOrderStatistic().then(res => {
        state.balance = res.balance;
    })
})
const withdraw = () => {
    if (state.amount == '' || state.password == '') {
        showToast(t('Cannot be blank'));
        return
    }
    state.loading = true;
    submitWithdraw({
        type: state.type,
        amount: state.amount,
        password: state.password
    }).then(() => {
        showToast(t('Successful operation'));
    }).catch(err => {

        showToast(err.msg);
    }).finally(() => {
        state.loading = false;
    })
}
</script>

<template>
    <Header :title="$t('Withdraw')"></Header>
    <div class=" mx-2">
        <div class="card rounded-sm mt-3 shadow-xl ">
            <div class="card-body p-2">
                <div class=" flex flex-col items-center rounded-md w-[80%] bg-[#9AD9EA] h-7 place-self-center">
                    <div class="text-[30px]">${{ formatPrice(state.balance) }}</div>
                    <div class="text-[12px]">{{ $t('Withdrawable cash amount') }}</div>
                </div>
                <div class="flex gap-1">
                    <input type="radio" name="BANKCARD" class="radio  h-2 w-2" v-model="state.type" value="BANKCARD"
                        :checked="state.type == 'BANKCARD'" />
                    <span> {{ $t('Withdrawal to your bank card') }}</span>
                </div>
                <div class="flex gap-1">
                    <input type="radio" name="BANKCARD" class="radio  h-2 w-2" v-model="state.type" value="USDT"
                        :checked="state.type == 'USDT'" />
                    <span>USDT</span>
                </div>

            </div>
        </div>

        <div class="flex flex-col gap-1">
            <div class="mt-4 mb-2  text-[16px]">{{ $t('Enter your sum') }}</div>
            <input type="text" :placeholder="$t('Minimum transaction amount is:100.00')" v-model="state.amount"
                class="input input-bordered w-full max-w-xs text-[12px] min-h-0 h-4" />
            <input type="password" v-model="state.password" :placeholder="$t('Enter your Fund Password')"
                class="input input-bordered w-full max-w-xs text-[12px] min-h-0 h-4" />
        </div>
        <div class="pt-4" @click="withdraw">
            <button class="btn btn-primary btn-xs w-full bg-[#333]" :disabled="state.loading"
                style="font-size: 0.4rem;">
                {{ $t('Withdraw') }}
            </button>
        </div>
    </div>

</template>
